<template>
  <div>
    <page-view v-if="/^meal-date$/.test($route.name)" class="page-view" :title="false">
      <div slot="headerContent">
        <a-breadcrumb class="s-breadcrumb">
          <a-breadcrumb-item><nuxt-link to="/meal/manage">餐券管理</nuxt-link></a-breadcrumb-item>
          <a-breadcrumb-item>订餐日期设置</a-breadcrumb-item>
        </a-breadcrumb>
      </div>

      <a-card class="s-card">
        <a-spin :spinning="sending">
          <div class="date-header">
            <a-icon type="left" @click="changeMonth(-1)" />
            <span class="date-chose">{{ selectedMonth.format('YYYY-MM') }}</span>
            <a-month-picker :value="selectedMonth" @change="monthChange" />
            <a-icon type="right" @click="changeMonth(1)" />
          </div>

          <div class="date-operate">
            <div class="date-operation">
              <a-button v-show="!checkable" type="primary" @click="choseEditDate">批量设置可订日期</a-button>
              <a-button><nuxt-link to="/meal/date/notice">新建换餐通知</nuxt-link></a-button>
            </div>
            <div class="date-describe">
              <span>可订餐</span>
              <span>不可订</span>
              <span>部分可订</span>
            </div>
          </div>

          <a-calendar :value="selectedMonth" class="calendar" @select="onSelect">
            <template slot="dateCellRender" slot-scope="value">
              <div class="mark-container">
                <span
                  :class="[
                    'mark',
                    $get(scheduleMaps[value.format('YYYY-MM-DD')], 'isOrder') === 1 ? 'markGreen' :
                    $get(scheduleMaps[value.format('YYYY-MM-DD')], 'isOrder') === 2 ? 'markBlue' :
                    'markRed'
                  ]"
                />
              </div>

              <div v-if="checkable && checkedDates.includes(value.format('YYYY-MM-DD'))" class="markMulti">
                <a-icon type="check-circle" />
              </div>
            </template>
          </a-calendar>

          <div v-show="checkable" class="footer-btn">
            <a-button @click="checkable = false">取消批量选择</a-button>
            <a-button :type="checkedDates.length ? 'primary' : 'disabled'" @click="toEdit">确定并进行下一步</a-button>
          </div>
        </a-spin>
      </a-card>
    </page-view>

    <nuxt-child v-else />

  </div>
</template>

<script>
import { PageView, STable } from '@/components'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'Date',
  components: { PageView, STable },

  async fetch ({ store }) {
    const { $get, getters } = store
    const { mealTypeNames } = getters.meal
    if (!$get(mealTypeNames, 'length')) await store.dispatch('meal/getMealType')
    await store.dispatch('meal/getSchedule')
  },

  data () {
    return {
      sending: false,
      checkable: false,
      checkedDates: []
    }
  },

  computed: {
    ...mapState({
      selectedMonth (state) { return this.$moment(state.meal.selectedMonth) },
      scheduleMaps: state => state.meal.scheduleMaps
    })
  },

  watch: {
    $route (t) {
      if (t.name === 'meal-date') this.init()
    },

    scheduleMaps () {
      this.$forceUpdate()
    }
  },

  methods: {
    ...mapActions('meal', ['monthChange', 'getSchedule']),

    async init () {
      this.sending = false
      this.checkable = false
      this.checkedDates.splice()
      this.$toggleSending(1)
      await this.getSchedule()
      this.$toggleSending()
    },

    async changeMonth (num) {
      const { selectedMonth } = this
      const month = selectedMonth.add(num, 'M')
      this.monthChange(month)
      this.sending = true
      await this.getSchedule()
      this.sending = false
    },

    choseEditDate () {
      this.checkable = true
      this.checkedDates.splice(0)
    },

    onSelect (value) {
      const { checkedDates, checkable, $message, $moment, $router } = this
      const dateStr = $moment(value).format('YYYY-MM-DD')
      if (checkable) {
        const validDate = $moment($moment().add(3, 'day').format('YYYY-MM-DD'))
        if (!validDate.isBefore(value)) {
          $message.destroy()
          const now = validDate.format('YYYY年MM月DD日')
          return $message.error(`只能选择${now}后及其往后的时间`)
        }
        const index = checkedDates.indexOf(dateStr)
        if (index > -1) checkedDates.splice(index, 1)
        else checkedDates.push(dateStr)
      } else {
        $router.push(`/meal/date/detail/${dateStr}`)
      }
    },

    toEdit () {
      const { $router, checkedDates } = this
      $router.push(`/meal/date/edit/${checkedDates}`)
    }

  }
}
</script>

<style lang="less" scoped>
@blue-custom: #3388da;
@green-custom: #69b686;
@red-custom: #ec5454;
@orange-custom: #eead50;
@border-color: #d7d7d7;
@day-color: #a3a3a3;
@today-color: #338ff6;
@td-height: 88px;

.date-header{
  .Flex;
  .Flex-center;
  user-select: none;
  position: absolute;
  left: 12px;
  top: 0;
  color: @blue-custom;
  font-size: 26px;

  .date-chose{
    margin: 0 50px;
    font-size: 32px;
    font-weight: bold;
  }

  .anticon{
    cursor: pointer;
  }

  .ant-calendar-picker{
    position: absolute;
    z-index: 2;
    opacity: 0;
    left: 50%;
    transform: translateX(-50%);

    /deep/ input{
      cursor: pointer;
    }
  }
}

.date-operate {
  .Flex;
  .Flex-justify-spacebetween;
  .Flex-wrap;
  margin: 0 30px 30px;

  .date-describe,
  .date-operation {
    width: 100%;
    text-align: right;
  }

  .date-operation {
    margin-bottom: 20px;

    button:first-of-type {
      margin-right: 12px;
    }
  }

  .date-describe {
    span {
      position: relative;
      margin-right: 20px;
      padding-left: 15px;
      color: @green-custom;

      &::before{
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: @green-custom;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
      }
    }

    span:nth-child(2){
      color: @red-custom;

      &::before{
        background: @red-custom;
      }
    }

    span:nth-child(3){
      color: @orange-custom;

      &::before{
        background: @orange-custom;
      }
    }
  }
}

/deep/ .ant-fullcalendar-header {
  display: none;
}

.calendar{
  .ant-fullcalendar-column-header,
  .ant-fullcalendar-column-header-inner {
    text-align: center;
  }

  /deep/ .ant-fullcalendar-today .ant-fullcalendar-date {
    border-bottom: 3px solid @today-color !important;
  }

  /deep/ .ant-fullcalendar-value {
    padding-right: 20px;
    position: relative;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: @day-color !important;

    &::after {
      content: "日";
      position: absolute;
      right: 0;
      font-size: 14px !important;
      font-weight: 500 !important;
    }
  }

  /deep/ .ant-fullcalendar-date {
    border-top: 0 !important;
    margin: 0;
    height: @td-height !important;
  }

  /deep/ .ant-fullcalendar-content {
    height: calc(~"88px - 24px - 8px") !important;
  }

  /deep/ .ant-fullcalendar-tbody td:not(.ant-fullcalendar-last-month-cell) {
    border: 1px solid @border-color;
  }

  .mark-container {
    width: 100%;
    height: 100%;
    position: relative;

    .mark {
      width: 100%;
      height: 100%;

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        text-align: center;
        color: #fff;
        font-size: 13px;
      }
    }

    .markGreen::after {
      background: @green-custom;
      content: "可订餐日期"
    }

    .markBlue::after {
      background: @orange-custom;
      content: "部分可定日期"
    }

    .markRed::after {
      background: @red-custom;
      content: "不可订日期"
    }
  }

  .markMulti{
    position: absolute;
    color: @green;
    font-size: 30px;
    top: 0;
    left: 12px;
  }
}

.footer-btn{
  .Flex;
  justify-content: center;

  .ant-btn{
    margin-right: 50px;
  }
}

.calendar {
  /deep/ .ant-fullcalendar-last-month-cell {
    >div {
      display: none;
    }
  }

  /deep/ .ant-fullcalendar-next-month-btn-day {
    display: none;
  }
}

</style>
